<template>
  <div class="config-template-container">
    <el-row>
      <el-col :span="24">
        <el-button @click="editNode('create',{})"
                   type="primary">新增进度节点</el-button>
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="nodeList.list"
                  height="500"
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column type="index">
          </el-table-column>
          <el-table-column prop="node_name"
                           label="节点名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="order"
                           label="节点排序"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="status_name"
                           label="节点状态"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="end_time"
                           label="节点时间"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button @click="editNode('update',scope.row)"
                         type="text">修改</el-button>
              <el-button @click="deleteNode(scope.row)"
                         type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handlePageChange"
                       :current-page="requestParam.page"
                       :page-size="requestParam.page_size"
                       layout="total,sizes,prev, pager, next, jumper"
                       background
                       :total="nodeList.total_count"
                       align="center">
        </el-pagination>
      </el-col>
    </el-row>
    <EditTemplateNodeDialog :dialogVisible.sync="editNodeDialogVisible"
                            :dialogStatus="editNodeDialogStatus"
                            :dialogForm="editNodeDialogForm"
                            @callback="editNodeCb"></EditTemplateNodeDialog>
  </div>
</template>

<script>
import { ImageProgressApi } from '@/services/WorkCenter'
import EditTemplateNodeDialog from '@/pages/workCenter/ImageProgress/components/EditTemplateNodeDialog'
export default {
  components: {
    EditTemplateNodeDialog
  },
  data () {
    return {
      requestParam: {
        page: 1,
        page_size: 10,
        is_page: 1,
        image_id: ''
      },
      nodeList: {
        list: [],
        page: 1,
        total_count: 0
      },
      // 编辑节点弹框是否可见
      editNodeDialogVisible: false,
      // 编辑节点弹框状态
      editNodeDialogStatus: 'create',
      // 编辑节点弹框数据
      editNodeDialogForm: {},
      nodeStatus: ['未启动', '进行中', '已完成']
    };
  },
  watch: {
    '$store.state.choosedProject': function (val) {

    }
  },

  methods: {
    back () {
      this.$router.go(-1)
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getNodeList()
    },
    editNodeCb () {
      this.getNodeList()
    },
    editNode (type, data) {
      this.editNodeDialogStatus = type
      this.editNodeDialogForm = data
      this.editNodeDialogForm.image_id = data.image_id || this.$route.query.id
      this.editNodeDialogVisible = true
    },
    deleteNode (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteNodeApi(row.node_id)
        })
        .catch(() => {

        })
    },
    deleteNodeApi (id) {
      ImageProgressApi.deleteNode({
        data: {
          node_id: id
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除节点成功')
          this.getNodeList()
        }
      })
    },
    getNodeList () {
      ImageProgressApi.getNodeList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.nodeList = res.data
          this.nodeList.list.map((item) => {
            item.status_name = this.nodeStatus[item.status]
          })
        }
      })
    }
  },
  created () {
    this.requestParam.image_id = this.$route.query.id
    this.getNodeList()
  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.config-template-container {
  padding: 20px;
  .el-row {
    margin-bottom: 20px;
  }
}
</style>
